<template>
    <!-- 支付交易 -->
    <div class="cashier-list">
        <!-- 导航 -->
        <tz-breadcrumb  :pathArr='[{"name": "硬件"},{"name": "商米POS机", "url": "/shangmi"}]'></tz-breadcrumb>
        <!-- 搜索表单 -->
        <form class="form" autocomplete="off" @submit.prevent="onSubmit" action="">
            <!-- 开始时间 
            <div class="form-item">
                <el-input class="form-input" clearable v-model="cashierName" placeholder="开始时间" size="medium"></el-input>
            </div>
            <div class="form-item">
                <el-input class="form-input" clearable v-model="account"   placeholder="结束时间" size="medium"></el-input>
            </div>
            <el-button type="primary" native-type='submit'>查询</el-button>-->
            <el-button type="primary">暂未上线</el-button>
        </form>
        
        <el-pagination v-if="total > pageNum" class="text-center pager" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  data: function () {
    return {
      // 收银员姓名
      cashierName: '',
      // 所属商户
      storeName: '',
      // 收银员帐号
      account: '',
      // 支付方式
      payTypeOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'alipay',
          label: '支付宝支付'
        },
        {
          value: 'weixin',
          label: '微信支付'
        },
        {
          value: 'back',
          label: '银行卡支付'
        }
      ],
      payType: 'all',
      // 交易状态
      orderStatusOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'paySuccess',
          label: '支付成功'
        },
        {
          value: 'refundSuccess',
          label: '退款成功'
        }
      ],
      orderStatus: 'all',
      // 收银员列表数据
      tableData: [],
      // 每页数量
      pageNum: 10,
      // 当前页
      page: 1,
      total: 0
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 提交搜索
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.requestData();
    },
    formatter (row, column) {
      return row.address;
    },
    handleCurrentChange (val) {
      this.page = val;
      this.requestData();
    },
    filterTag (value, row) {
      return row.tag === value;
    },
    filterHandler (value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    requestData () {
      let that = this;
      http.get(api.cashierList, {
        token: localStorage.getItem('token'),
        mobile: that.account,
        pagesize: that.pageNum,
        page: that.page
      }, response => {
        console.log(response);
        that.tableData = response.data[0].result;
        that.total = response.data[0].total;
      }, err => {
        console.log(err);
      });
    },
    // 记录详情
    detailsPages (id) {
      this.$router.push({
        path: '/cashierdetails',
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem
  margin-top: 15px
  margin-bottom: 12px
  box-sizing: border-box
  background: #fff
  box-shadow: 1px 1px 1px #999
  .form-item
    display: inline-block
    margin-right: 35px
    label
      margin-right: 4rem
      font-size: 14px
      color: #333
    .form-input
      max-width: 15rem
  .line
    height: 4.5rem
.demo-table-expand
  font-size: 0
  label
    width: 90px
    color: #99a9bf
  .el-form-item 
    margin-right: 0
    margin-bottom: 0
    width: 50%
.pager
  padding: 0
</style>
